<template>
  <el-dialog title="提示" :visible.sync="assignPerm">
    <el-tree
      ref="tree"
      :data="permList"
      :props="defaultProps"
      show-checkbox
      default-expand-all
      node-key="id"
      :default-checked-keys="permIds"
    />
    <template #footer>
      <el-row type="flex" justify="center">
        <el-row :span="6">
          <el-button size="small" @click="$emit('close')">取 消</el-button>
          <el-button size="small" type="primary" @click="confirm">
            确 定
          </el-button>
        </el-row>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { getRoleDetail, assignPerm } from '@/api/setting'
import { dataToTree } from '@/utils/validate'
import { getAllPerm } from '@/api/permission'
export default {
  name: 'AssignPerm',
  props: {
    assignPerm: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      permList: [],
      permIds: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.getAllPerm()
  },
  methods: {
    async getAllPerm() {
      const res = await getAllPerm()
      this.permList = dataToTree(res, '0')
    },
    async confirm() {
      const ids = this.$refs.tree.getCheckedKeys()
      await assignPerm({
        id: this.id,
        permIds: ids
      })
      this.$message('权限分配成功')
      this.$emit('close')
    },
    // 根据ID获取角色详情
    async getRoleDetail(id) {
      const res = await getRoleDetail(id)
      this.permIds = res.permIds
    }
  }
}
</script>

<style></style>
